<!-- <template>
    <el-descriptions ref="desc" v-bind="Object.assign({}, attrs, $attrs)">
        <template v-slot:title>
            <slot name='title'></slot>
        </template>
        <el-descriptions-item v-for="(item, index) in model" :key="index" :label="$tt(item.label)" v-if="_if(item)"
            v-bind="_itemProps(item)">
            <slot :name="item.slot" :data="data">
                {{ item.formatter ? item.formatter(data, item, data[item.key], index) : data[item.key] }}
            </slot>
        </el-descriptions-item>


    </el-descriptions>
</template> -->
<script>
import bottom_tip_item from "./bottom-tip-item.vue"
import super_input from "./super-input.vue"

export default {
    components: {
        bottom_tip_item, super_input,
    },
    props: {
        model: {
            type: Array,
            default: () => []
        },
        data: {
            type: Object,
            default: () => {
                return {

                }
            }
        },
        attrs: Object,
    },
    render: function (h) {
        const scopedSlots = {}
        if (this.$scopedSlots['title']) {
            scopedSlots.title = this.$scopedSlots['title']
        }

        return h('el-descriptions', {
            ref: 'desc',
            props: Object.assign({}, this.attrs, this.$attrs),
            scopedSlots,
        }, this.model.filter(it => this._if(it)).map((item, index) => {


            let child = item.formatter ? item.formatter(this.data, item, _.get(this.data, item.key, ''), index) : _.get(this.data, item.key, '')
            if (item.render) {
                child = item.render(h, { data: this.data, item, index, })
            } else if (item.component) {
                child = h(bottom_tip_item, {
                    props: {
                        tip: this.data.error && this.data.error[item.key],
                    },
                    on: {
                        click: (e) => e.stopPropagation()
                    },
                }, [
                    h(super_input, {
                        props: Object.assign({
                            value: this.data[item.key],
                        }, item.component({ data: this.data, item, index })),
                        on: {
                            input: e => this.data[item.key] = e
                        }
                    })
                ])
            } else if (item.slot && this.$scopedSlots[item.slot]) {
                child = this.$scopedSlots[item.slot]({ data: this.data, item, index })
            }

            return h('el-descriptions-item', {
                key: index,
                props: {
                    label: this.$tt(item.label),
                    ...this._itemProps(item),
                }
            }, [child])
        }))
    },
    methods: {
        _itemProps(item) {
            const { label, slot, component, attrs, ...props } = item
            return Object.assign({}, props, attrs)
        },
        _if(item) {
            if (item.if == undefined) return true
            if (item.if instanceof Function) {
                return item.if(this.data, item, this.data[item.key])
            }
            return !!item.if
        },
    }
}
</script>